<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分页功能示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }

        .pagination {
            display: flex;
            list-style-type: none;
            padding: 0;
        }

        .pagination li {
            margin-right: 5px;
        }

        .pagination li a {
            display: block;
            padding: 5px 10px;
            border: 1px solid #ddd;
            text-decoration: none;
            color: #007BFF;
        }

        .pagination li a:hover {
            background-color: #f2f2f2;
        }

        .pagination li.active a {
            background-color: #007BFF;
            color: white;
        }
    </style>
</head>

<body>
    <table id="data-table">
        <thead>
            <tr>
                <th>ID</th>
                <th>用户名</th>
                <th>内容</th>
                <th>时间</th>
            </tr>
        </thead>
        <tbody id="table-body">
            <!-- 数据将在这里显示 -->
        </tbody>
    </table>
    <ul class="pagination" id="pagination"></ul>

    <script>
        // 原始数据
        const data = [
            {
                id: 293,
                username: "老李",
                content: "大家好啊",
                time: "2023-02-23 14:00:44"
            },
            {
                id: 258,
                username: "是是是",
                content: "三生三世",
                time: "2021-09-24 15:07:16"
            },
            {
                id: 257,
                username: "是是是",
                content: "三生三世",
                time: "2021-09-24 15:07:15"
            },
            {
                id: 256,
                username: "是是是",
                content: "三生三世",
                time: "2021-09-24 15:07:15"
            },
            {
                id: 255,
                username: "是是是",
                content: "三生三世",
                time: "2021-09-24 15:07:15"
            },
            {
                id: 254,
                username: "是是是",
                content: "三生三世",
                time: "2021-09-24 15:06:53"
            },
            {
                id: 253,
                username: "各个风格",
                content: "腹股沟管",
                time: "2021-09-24 14:42:22"
            },
            {
                id: 252,
                username: "密码",
                content: "是华菱",
                time: "2021-09-24 12:11:59"
            },
            {
                id: 251,
                username: "密码",
                content: "是华菱",
                time: "2021-09-24 12:11:57"
            },
            {
                id: 250,
                username: "密码",
                content: "是华菱",
                time: "2021-09-24 12:11:56"
            },
            {
                id: 250,
                username: "密码",
                content: "是华菱",
                time: "2021-09-24 12:11:56"
            },
            {
                id: 250,
                username: "密码",
                content: "是华菱",
                time: "2021-09-24 12:11:56"
            },
            {
                id: 250,
                username: "密码",
                content: "是华菱",
                time: "2021-09-24 12:11:56"
            },
            {
                id: 250,
                username: "密码",
                content: "是华菱",
                time: "2021-09-24 12:11:56"
            },
            {
                id: 250,
                username: "密码",
                content: "是华菱",
                time: "2021-09-24 12:11:56"
            },
            {
                id: 250,
                username: "密码",
                content: "是华菱",
                time: "2021-09-24 12:11:56"
            },
            {
                id: 250,
                username: "密码",
                content: "是华菱",
                time: "2021-09-24 12:11:56"
            },
            {
                id: 250,
                username: "密码",
                content: "是华菱",
                time: "2021-09-24 12:11:56"
            },
            {
                id: 250,
                username: "密码",
                content: "是华菱",
                time: "2021-09-24 12:11:56"
            },
            {
                id: 250,
                username: "密码",
                content: "是华菱",
                time: "2021-09-24 12:11:56"
            },
            {
                id: 250,
                username: "密码",
                content: "是华菱",
                time: "2021-09-24 12:11:56"
            },
            {
                id: 250,
                username: "密码",
                content: "是华菱",
                time: "2021-09-24 12:11:56"
            },
        ];

        const itemsPerPage = 5;
        const totalPages = Math.ceil(data.length / itemsPerPage);

        // 渲染表格数据
        function renderTable(page) {
            const startIndex = (page - 1) * itemsPerPage;
            const endIndex = startIndex + itemsPerPage;
            const currentPageData = data.slice(startIndex, endIndex);

            const tableBody = document.getElementById('table-body');
            tableBody.innerHTML = '';

            currentPageData.forEach(item => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${item.id}</td>
                    <td>${item.username}</td>
                    <td>${item.content}</td>
                    <td>${item.time}</td>
                `;
                tableBody.appendChild(row);
            });
        }

        // 渲染分页器
        function renderPagination(currentPage) {
            const pagination = document.getElementById('pagination');
            pagination.innerHTML = '';

            const prevLi = document.createElement('li');
            const prevA = document.createElement('a');
            prevA.href = '#';
            prevA.textContent = '上一页';
            prevA.addEventListener('click', function (e) {
                e.preventDefault();
                if (currentPage > 1) {
                    renderTable(currentPage - 1);
                    renderPagination(currentPage - 1);
                }
            });
            prevLi.appendChild(prevA);
            pagination.appendChild(prevLi);

            const currentLi = document.createElement('li');
            currentLi.classList.add('active');
            const currentA = document.createElement('a');
            currentA.href = '#';
            currentA.textContent = currentPage;
            currentLi.appendChild(currentA);
            pagination.appendChild(currentLi);

            const nextLi = document.createElement('li');
            const nextA = document.createElement('a');
            nextA.href = '#';
            nextA.textContent = '下一页';
            nextA.addEventListener('click', function (e) {
                e.preventDefault();
                if (currentPage < totalPages) {
                    renderTable(currentPage + 1);
                    renderPagination(currentPage + 1);
                }
            });
            nextLi.appendChild(nextA);
            pagination.appendChild(nextLi);
        }

        // 初始化页面
        renderTable(1);
        renderPagination(1);
    </script>
</body>

</html>